<template>
    <el-container style="text-align: right; font-size: 12px">
        <el-backtop :bottom="60"></el-backtop>
        <!--********** 头部 -->
        <el-header style="height:auto"
                   :class="addpadding">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto"
                 :class="bacColor">
            <div class="mo_login"
                 v-loading="loading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="#ffffff">
                <div class="add_line">
                    <div class="addbreadcrumb">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>{{text_cate_name}}</el-breadcrumb-item>
                        </el-breadcrumb>

                    </div>
                    <div class="add_text">
                        <el-button type="primary"
                                   @click="ToPostMessage()">立即创作</el-button>
                    </div>

                </div>

                <div class="periphery">

                    <div v-show="!liststuats"
                         class="no-addlist">
                        <div class="no-showimg">
                            <el-image :src="topimgsrc"
                                      fit="cover"></el-image>
                        </div>
                        <div class="no_text">
                            <p>未有任何文章，请点击右上角</p>
                        </div>
                    </div>

                    <div v-show="liststuats"
                         class="pure-list">
                        <div class="pure-hotlist"
                             v-for="(item,index) in rightlist"
                             :key="index">
                            <div class="purelist-table"
                                 @click="ToMessageDetails(item.id)">
                                <div class="purelist-img">
                                    <img class="purelist-img"
                                         :src="item.imgsrc"
                                         alt="">
                                </div>
                            </div>
                            <div class="purelist-details">
                                <div class="purelist-title"
                                     @click="ToMessageDetails(item.id)">
                                    <p>{{item.title}}</p>
                                </div>

                                <div class="purelist-text"
                                     @click="ToMessageDetails(item.id)">{{item.text}}</div>
                                <div class="purelist-name"
                                     @click="ToMessageDetails(item.id)">{{item.name}} {{item.date}}</div>
                                <div class="purelist-delete">
                                    <el-button @click="DeleteText(item.id,item.title)"
                                               type="danger"
                                               icon="el-icon-delete"
                                               circle></el-button>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="add_pagination">

                        <el-pagination @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-size="6"
                                       layout="total,  prev,pager,  next, jumper"
                                       :total="addTotal">

                        </el-pagination>
                    </div>

                </div>
            </div>
        </el-main>

        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>

</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eFooter from "@/components/public/Footer.vue";

export default {
    //文字超出显示省略号
    filters: {
        ellipsis(value) {
            if (!value) return ''
            if (value.length > 8) {
                return value.slice(0, 8) + '...'
            }
            return value
        }
    },

    components: {
        eHeader,
        eFooter
    },
    data() {
        return {
            topimgsrc: require("../../assets/images/no_text.jpg"),
            text_cate_name: "我的发布",
            liststuats: false,
            rightlist: [],
            addTotal: 1,
            currentPage: 1,
            accessId: 0,
            addpadding: "addpadding",
            bacColor: "#F0FFFE",
            loading: false,
            urls:this.$urls
        };
    },
    computed: {

    },

    created() {
        //读取sessionStorage的ID
        this.accessId = localStorage.getItem('accessId')
        this.getPersonallist(this.accessId, 1, 6);
        this.getTotal(this.accessId);
        //this.getPersonallist(1, 1, 4);
        //this.getTotal(1);
        let getColor = localStorage.getItem('background-color')
        let Colorarr = getColor.slice(1, 7)
        this.bacColor = Colorarr

    },
    mounted() {
        this.$bus.$on('changeColor', (e) => {

            this.addpadding = "addpadding";
            if (this.bacColor != e) {
                let Colorarr = e.slice(1, 7)
                this.bacColor = Colorarr
            }

        })
    },
    watch: {},

    methods: {
        //得到个人列表总数
        getTotal(textid) {
            let _this = this;
            let Url = "/mylist?m_id=" + textid + "&page=1&limit=10000"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        switch (adddata.current_page) {
                            case 1:
                                let rightdata = adddata.data;

                                _this.addTotal = rightdata.length;
                                if (_this.addTotal != 0) {
                                    _this.liststuats = true;
                                }



                                break;
                        }
                        break;
                    case 1002:
                        console.log(resdata.msg)
                        break

                }

            });
        },
        // 文章列表接口
        getPersonallist(textid, page, limit) {
            let _this = this;
            this.loading = true
            _this.rightlist = [];
            let Url = "/mylist?m_id=" + textid + "&page=" + page + "&limit=" + limit
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        switch (adddata.current_page) {
                            case page:
                                let rightdata = adddata.data;
                                for (var i = 0; i < rightdata.length; i++) {

                                    _this.rightlist.push({
                                        id: rightdata[i].a_id,
                                        title: rightdata[i].title,
                                        text: rightdata[i].seo_keywords,
                                        imgsrc: rightdata[i].thumb,
                                        name: rightdata[i].name,
                                        date: rightdata[i].created_at
                                    });
                                }
                                this.loading = false
                                break;

                        }
                        break;
                    case 1002:
                        this.loading = false
                        console.log(resdata.msg)
                        break

                }

            });
        },
        //删除文章
        DeleteText(id, title) {
            this.$confirm('是否要删除该文章?', '删除文章', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: false
            }).then(() => {
                //this.$router.push("/MyPayA")
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });

                //删除文章接口
                this.removeText(this.accessId, id, title)


            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });
        },
        //点击分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {

            this.getPersonallist(this.accessId, val, 6);

        },
        //跳转文章详情
        ToMessageDetails(textid) {
            this.$router.push("/MyMessageDetails")
            sessionStorage.setItem('Details', textid)
            sessionStorage.setItem('Detailstotal', this.addTotal)
        },
        //删除文章请求接口
        removeText(userid, textid, textname) {
            let _this = this;
            _this.loading = true
           //let Url = "/artdelete"
            let Params = {
                a_id: textid,
            };
            _this.$https.fetchPost("/artdelete", Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        _this.showError("success", "删除成功");
                        //重新请求列表
                        this.getPersonallist(this.accessId, 1, 6);
                        this.getTotal(this.accessId);
                        break;
                    case 1002:


                        break;

                }
            });


        },

        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },
        ToPostMessage() {
            this.$router.push("/PostMessage")
        }
    }
};
</script>
<style lang="scss"  scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: hidden;
    padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    max-width: 1200px;
    width: 100%;
    min-width: 1000px;
    min-height: 635px;
    height: auto;
    margin: 20px auto;
    background: #fbfbfb;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }
    .add_line {
        width: 100%;
        height: 40px;
        .addbreadcrumb {
            width: 80%;
            height: 40px;
            font-size: 14px;
            padding-top: 13px;
            padding-left: 22px;
            float: left;
        }
        .add_text {
            width: 15%;
            height: 100%;
            float: right;
            padding-right: 2.3%;
        }
    }

    .periphery {
        width: 100%;
        min-height: 620px;
        height: auto;
        background: #ffffff;
        //padding-top: 42px;
        overflow: hidden;

        .no-addlist {
            width: 164px;
            height: 214px;
            margin: auto;
            margin-top: 186px;
            margin-bottom: 156px;
            .no-showimg {
                width: 100%;
                height: 164px;
                .addimg {
                    width: 100%;
                    height: 100%;
                }
            }
            .no_text {
                width: 100%;
                height: 22px;
                line-height: 22px;
                margin-top: 28px;
                text-align: center;
                padding-left: 5px;
                color: #999999;
            }
        }

        .pure-list {
            width: 100%;
            height: auto;
            min-height: 620px;
            overflow: hidden;
            margin-top: 5px;
            .pure-hotlist {
                width: 100%;
                height: 145px;
                float: left;
                padding: 13px 0px 8px 20px;
                border-bottom: 1px solid #f6f6f6;
                cursor: pointer;
                .purelist-table {
                    width: 15.5%;
                    height: 122px;
                    border-radius: 5px;
                    float: left;
                    .purelist-img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .purelist-details {
                    width: 83.5%;
                    height: 122px;
                    padding: 0px 12px 17px 12px;
                    float: left;
                    margin-left: 10px;
                    text-align: left;
                    .purelist-title {
                        width: 100%;
                        height: 40px;
                        font-size: 18px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 20px;
                        float: left;
                        text-align: left;
                    }
                    .purelist-title :hover {
                        color: #558ffb;
                        text-decoration: underline;
                    }
                    .purelist-text {
                        width: 100%;
                        height: 40px;
                        font-size: 14px;
                        color: #999999;
                        float: left;
                        text-align: left;
                        overflow: hidden;
                    }
                    .purelist-name {
                        width: 90%;
                        height: 20px;
                        float: left;
                        color: #999999;
                        text-align: left;
                        margin-top: 27px;
                    }
                    .purelist-delete {
                        width: 10%;
                        height: auto;
                        float: left;
                        padding-left: 3%;
                        padding-top: 10px;
                    }
                }
            }
        }
        .add_pagination {
            margin: auto;
            margin-bottom: 20px;
            margin-top: 30px;
            padding: 0 38% 0 20%;
        }
    }
}
.mo_login /deep/ .el-loading-spinner {
    font-size: 30px;
}
.addpadding {
    padding: 0;
}
.DAEBFF {
    background: #daebff;
}
.F5F5FD {
    background: #f5f5fd;
}
.F0FFFE {
    background: #f0fffe;
}
</style>